<template>
	<view>
		<view class="box mt0 pd16_15">
			<view class="order-list-item-tit" style="margin-bottom: 20upx;">
				<view class="flex alcenter space" >
					<view class="flex alcenter">
						<text class="ft14 cl-main">订单号{{isEmpty(datas.wxOrderId) ? datas.id : datas.wxOrderId}}</text>
					</view>
					<!-- <text class="ft14 ftw500" :style="{color:getColor}">{{datas.orderStatus}}</text> -->
					<text class="ft14 ftw500" :style="{color:getColor}">{{getStatusText(datas.orderStatus)}}</text>
				</view>
			</view>
			<view class="flex">
				<image mode="aspectFill" class="order-list-item-l" :src="datas.scenicAreaImg" style="width: 45%; height: auto; margin-right: 5%; border-radius: 5px;"></image>
				<view class="order-list-item-r">
					<view style="width: 300upx;" class="ft14 ftw600 cl-main text-over">{{datas.scenicAreaName}}</view>
					<view class="mt8 ft12 cl-notice">{{datas.createTime}}下单</view>
					<view class="flex alcenter cl-orange mt8" >
							<text class="ft16 ftw600"> ¥{{datas.payableAmount}}</text>
					</view>
				</view>
			</view>
			<view class="flex end space mt0" style="padding-top: 20upx;">
				<view @click="opuer(datas.id,datas.scenicAreaId)">
					<view v-if="datas.orderStatus == 0" class="btn-small" :style="getBtnStyle">去支付</view>
					<view v-if="datas.orderStatus == 1" class="btn-small" :style="getBtnStyle">播放</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getOrderStatusText } from '@/common/util.js'
	//status  0,待付款  1待使用    4已过期  8已完成
	export default{
		props:{
			datas:{
				type:Object,
				default:function(){
					return new Object;
				}
			}
		},
		computed:{
			getColor(){
				if(this.datas.status != 0){
					return  '#000000';
				}
				return this.tempColor;
			}
		},
		data(){
			return {
				
			}
		},
		created(){
			
		},
		methods:{
			isEmpty(value) {
			    return value === null || 
			           value === undefined || 
			           (typeof value === 'string' && value.trim() === '') ||
			           (Array.isArray(value) && value.length === 0) ||
			           (typeof value === 'object' && value !== null && Object.keys(value).length === 0);
			},

			getStatusText(status){
				console.log("orderStatus ---------")
				console.log(status)
				var s =  getOrderStatusText(status)
				console.log("return  ---  s")
				console.log(s)
				return s
			},
			 
			opuer(orderID,scenicAreaId){
				uni.navigateTo({
					url:'/sub_pages/scenicArea/info?id='+scenicAreaId
				})
				
			}
		}
	}
</script>

<style>
	.delivery-type{
		width: 128rpx;
		height: 36rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		font-size: 24rpx;
		color:#8A8D99;
		line-height: 36rpx;
		text-align: center;
		font-weight: 500;
		margin-left: 0rpx;
	}
</style>